/**
 *   Copyright 2011 - 2017 OSBI Ltd
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 */

/* ==========================================================================
    DEFAULT
   ========================================================================== */

/*  HEADER
   ========================================================================== */

.header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 2.875em 1.875em 1.875em;
}

.header .saiku-logo {
  display: block;
}

.header .description {
  float: left;
  margin: 0 0 .6em 0;
  font-size: 1.500em;
  font-weight: 400;
  line-height: 1.3;
}

.header .social {
  position: relative;
  top: -15px;
  float: right;
  text-align: center;
}

.header .social a {
  position: relative;
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  margin: 0 .1em;
  border: 4px solid $saiku;
  border-radius: 50%;
  background: $white;
  text-align: left;
}

.header .social a > span {
  display: none;
}

.header .social a:hover:before {
  position: absolute;
  top: 120%;
  right: 0;
  width: 600%;
  color: $saiku;
  content: attr(data-info);
  text-align: right;
  pointer-events: none;
}

.header .social a:hover {
  background-color: $saiku;
}

.header .social a .fa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2;
  color: $saiku;
  text-align: center;
  text-indent: 0;
}

.header .social a:hover .fa {
  color: $white;
}

/*  HEADER MEDIA QUERIES
   ========================================================================== */

@media screen and (max-width: 55em) {
  .header .description,
  .header .social {
    float: none;
  }

  .header > .saiku-logo,
  .header .description {
    text-align: center;
  }

  .header .social {
    margin: 30px auto;
  }
}

/*  CONTAINER
   ========================================================================== */

.container {
  width: 90%;
  margin: 0 auto;
  padding: 1em;
}

/*  OVERLAY
   ========================================================================== */

/* overlay style */

.overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d8d5cc;
}

/* overlay closing cross */

.overlay .overlay-close {
  position: absolute;
  z-index: 200;
  top: 20px;
  right: 20px;
  overflow: hidden;
  width: 48px;
  height: 48px;
  color: transparent;
  border: none;
  outline: none;
  background: url("../images/cross.svg") no-repeat center center;
  cursor: pointer;
  text-indent: 200%;
}

/* overlay content */

.overlay-notification {
  position: absolute;
  bottom: 0;
  display: none;
  text-align: center;
}

.overlay-container {
  display: flex;
  flex-direction: row;
}

.overlay-container > * {
  flex: 1 100%;
}

.overlay-center {
  position: relative;
  top: 50%;
  margin-right: 25%;
  margin-left: 25%;
  transform: translateY(-50%);
}

.overlay-donate-text {
  padding: 10px;
}

.overlay-donate-box {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-radius: 20px;
  background: #f5f5f5;
  text-align: center;
}

.overlay-donate-box .form-group {
  display: flex;
  width: 100%;
  margin: 5px;
  justify-content: center;
}

.overlay-donate-box .form-group input[type="text"] {
  width: 50%;
  margin: 5px 1px 3px 0;
  padding: 3px 0 3px 3px;
  border: 1px solid $gray;
  outline: none;
}

.overlay-donate-box .btn-donate {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2em;
  margin: 0 .1em;
  font-weight: bold;
  border: 4px solid $saiku;
  background: $saiku;
}

.overlay-donate-box .btn-donate span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1.4;
  color: $white;
  text-align: center;
  text-indent: 0;
}

.overlay-donate-box .btn-donate:hover {
  opacity: .9;
}

.overlay-donate-box .btn-donate.btn-lg {
  width: 17em;
}

.overlay-donate-box .box-other-value label {
  margin: 5px 3px 3px 0;
}

.overlay-donate-box .overlay-sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overlay-donate-box .overlay-sponsor label,
.overlay-donate-box .overlay-sponsor select {
  margin-bottom: 5px;
}

.overlay-donate-box hr {
  width: 90%;
  height: 1px;
  border: 0;
  background-image: linear-gradient(to left, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* effects */

.overlay-slidedown {
  visibility: hidden;
  transition: transform .4s ease-in-out, visibility 0s .4s;
  transform: translateY(-100%);
}

.overlay-slidedown.open {
  visibility: visible;
  transition: transform .4s ease-in-out;
  transform: translateY(0%);
}

/*  OVERLAY MEDIA QUERIES
   ========================================================================== */

@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}

/* medium devices, desktops */

@media only screen and (max-width: 992px) {
  /* overlay content */

  .overlay-notification {
    right: 15%;
    left: 15%;
    display: block;
  }

  .overlay-center {
    margin-right: 25%;
    margin-left: 25%;
  }

  .overlay-donate-text {
    display: none;
  }
}

/* small devices, tablets landscape */

@media only screen and (max-width: 768px) {
  /* overlay content */

  .overlay-notification {
    right: 15%;
    left: 15%;
    display: block;
  }

  .overlay-center {
    margin-right: 25%;
    margin-left: 25%;
  }

  .overlay-donate-text {
    display: none;
  }
}

/* small devices, tablets portrait */

@media only screen and (max-width: 600px) {
  /* overlay closing cross */

  .overlay .overlay-close {
    width: 32px;
    height: 32px;
  }

  /* overlay content */

  .overlay-notification {
    display: block;
  }

  .overlay-center {
    top: 45%;
    margin-right: 15%;
    margin-left: 15%;
  }

  .overlay-donate-text {
    display: none;
  }
}

/* extra small devices, phones */

@media only screen and (max-width: 480px) {
  /* overlay closing cross */

  .overlay .overlay-close {
    width: 32px;
    height: 32px;
  }

  /* overlay content */

  .overlay-notification {
    display: block;
  }

  .overlay-center {
    top: 45%;
    margin-right: 5%;
    margin-left: 5%;
  }

  .overlay-donate-text {
    display: none;
  }
}

/* custom, iphone retina */

@media only screen and (max-width: 360px) {
  /* overlay closing cross */

  .overlay .overlay-close {
    width: 32px;
    height: 32px;
  }

  /* overlay content */

  .overlay-notification {
    display: block;
  }

  .overlay-center {
    top: 45%;
    margin-right: 5%;
    margin-left: 5%;
  }

  .overlay-donate-text {
    display: none;
  }
}
